<!--轮播区-->
<template>
  <div class="scrollPic">
    <ul>
      <li>
        <a href="javascript:;">
          <img
            src="@/assets/lb1.jpg"
            alt=""
          />
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img
            src="@/assets/lb2.jpg"
            alt=""
          />
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img
            src="@/assets/lb3.jpg"
            alt=""
          />
        </a>
      </li>
    </ul>
    <div class="scrollPic_poiner">
      <p class="scrollPic_active"></p>
      <p></p>
      <p></p>
      <p></p>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeScrollPic",
};
</script>

<style>
.scrollPic {
  flex: 7;
  overflow: hidden;
  position: relative;
  height: 100%;
}

.scrollPic ul {
  width: 1000%;
}

.scrollPic ul li {
  width: 10%;
  float: left;
}

.scrollPic ul li a {
  width: 100%;
  display: block;
}

.scrollPic ul li a img {
  width: 100%;
  height: auto;
}

.scrollPic_poiner {
  width: 30%;
  height: 30px;
  position: absolute;
  bottom: 0;
  margin-left: -15%;
  left: 50%;
  overflow: hidden;
  padding: 5px 0;
  box-sizing: border-box;
}

.scrollPic_poiner p {
  float: left;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  margin-left: 23px;
  cursor: pointer;
}
.scrollPic_poiner .scrollPic_active {
  background-color: red;
}
</style>